<template>
	<view class="userAddress">
		<navbar :showBack="true">添加地址</navbar>
		<form @submit="goSubmit">
			<view class="address">
				<view class="list">
					<view class="item acea-row row-between-wrapper">
						<view class="name">姓名</view>
						<input type="text" :value="name" name="real_name" placeholder="请输入姓名"/>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view class="name">联系电话</view>
						<input type="text" :value="phone" name="phone" placeholder="请输入联系电话"/>
					</view>
					<view class="item acea-row row-between-wrapper" @click="showPicker">
						<view class="name">所在地区</view>
						<view class="dizhi acea-row">
							<view class="picker"><text v-show="showText">{{address.province}}-{{address.city}}-{{address.district}}</text></view>
							<view class="iconfont icon-dizhi font-color"></view>
						</view>
						<u-picker :default-region="defaultRegion" mode="region" v-model="show" @confirm="sure"></u-picker>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view class="name">详细地址</view>
						<input type="text" :value="detail" name="detail" placeholder="请填写具体地址"/>
					</view>
				</view>
				<view class="default acea-row row-middle">
					<checkbox-group @change="checkChange">
						<label class="acea-row row-middle">
							<checkbox :value="1" :checked="is_default==1?true:false" /><text>设置为默认地址</text>
						</label>
					</checkbox-group>
				</view>
			</view>
			<button form-type="submit" class="btn bg-color">立即保存</button>
			<!-- <view class="wechatAddress">导入微信地址</view> -->
		</form>
	</view>
</template>

<script>
	import api from "@/api/api.js";
	export default{
		data(){
			return{
				id:0,
				show:false,
				showText:false,
				is_default:0,
				defaultRegion:[], // picker选择器默认值
				name:'',
				phone:'',
				detail:'',
				address:{}
			}
		},
		onLoad(e) {
			if(JSON.stringify(e) != "{}"){
				let id = e.id;
				this.id = id;
			}
		},
		onReady(e) {
			let id = this.id;
			if(id != 0){
				this.getData(id)
			}
		},
		methods:{
			getData:function(id){
				const that = this;
				api.user.getAddressDetail(id).then(e=>{
					console.log(e)
					if(e.status == 200){
						let data = e.data;
						let arr = [];
						that.address.province = arr[0] = data.province;
						that.address.city = arr[1] = data.city;
						that.address.district = arr[2] = data.district;
						that.defaultRegion = arr;
						that.address.city_id = 0;
						that.showText = true;
						that.name = data.real_name;
						that.phone = data.phone;
						that.is_default = data.is_default;
						that.detail = data.detail;
					}else{
						uni.showToast({
							icon:"loading",
							title:e.msg,
							duration:1000
						})
					}
				})
			},
			showPicker:function(){
				this.show = true;
			},
			sure:function(e){
				console.log(e)
				this.address.province = e.province.label;
				this.address.city = e.city.label;
				this.address.district = e.area.label;
				this.address.city_id = e.city.value;
				this.showText = true;
			},
			checkChange:function(e){
				console.log(e)
				let val = e.detail.value;
				if(JSON.stringify(val) != "[]"){
					this.is_default = 1
				}else{
					this.is_default = 0
				}
			},
			goSubmit:function(e){
				let d = e.detail.value;
				let data = {};
				data.address = this.address;
				data.is_default = this.is_default;
				data.real_name = d.real_name;
				data.phone = d.phone;
				data.detail = d.detail;
				data.id = this.id;
				console.log(data)
				api.user.editAddress(data).then((e)=>{
					console.log(e)
					if(e.status == 200){
						uni.showToast({
							icon:"success",
							title:"保存成功",
							duration:800
						})
						setTimeout(()=>{
							uni.navigateBack({})
						},800)
					}else{
						uni.showToast({
							icon:"loading",
							title:e.msg,
							duration:1000
						})
					}
				})
			}
		}
	}
</script>

<style>
	.userAddress .address .list{
		background-color: #fff;
	}
	.userAddress .address .list .item{
		padding: 30rpx;
		border-top: 1rpx solid #eee;
	}
	.userAddress .address .list .item .name{
		width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}
	.userAddress .address .list .item input{
		width: 475rpx;
		font-size: 30rpx;
	}
	.userAddress .address .list .item .dizhi{
		width: 475rpx;
		margin-left: 20rpx;
	}
	.userAddress .address .list .item .dizhi .picker{
		width: 410rpx;
		font-size: 30rpx;
		height: 46rpx;
	}
	.userAddress .address .list .item .dizhi .picker text{
		line-height: 46rpx;
	}
	.userAddress .address .list .item .dizhi .iconfont{
		font-size: 43rpx;
	}
	.userAddress .address .default{
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}
	.userAddress .address .default text{
		margin-left: 15rpx;
	}
	.userAddress .btn{
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 50rpx auto;
		font-size: 32rpx;
		color: #fff;
	}
	.userAddress .wechatAddress{
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #fe960f;
		border: 1px solid #fe960f;
	}
</style>
